<template>
  <div class="index" id="choose-dducation" v-loading="loading">
    <div class="top-banner-box"></div>
    <ul class="list-box">
      <li class="list-item-box">
        <div class="van-row">
          <div class="van-col van-col--24">
            <div class="education-title-box flex-bet">
              <p class="question-title education-title">选择区县</p>
              <p class="rp">单选</p>
            </div>
          </div>
        </div>
        <div class="van-cell" @click="tog(index)"  v-for="(item,index) in cityOptions[aindex].children" :key="index">
          <div class="van-cell__value van-cell__value--alone">
            <div
              tabindex="0"
              class="mu-checkbox"
              :class="zindex==index ? 'mu-checkbox-checked' : ''"
            >
              <input value="1" type="checkbox" tabindex="-1" />
              <div class="mu-checkbox-wrapper">
                <div class="mu-checkbox-icon">
                  <div class="mu-checkbox-ripple-wrapper"></div>
                  <svg
                    viewBox="0 0 24 24"
                    class="mu-checkbox-icon-uncheck mu-checkbox-svg-icon"
                  >
                    <path
                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                    ></path></svg
                  ><svg
                    viewBox="0 0 24 24"
                    class="mu-checkbox-icon-checked mu-checkbox-svg-icon"
                  >
                    <path
                      d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                    ></path>
                  </svg>
                </div>
                <div class="mu-checkbox-label">{{item.name}}</div>
              </div>
            </div>
          </div>
        </div>

      </li>
    </ul>
    <p class="areaTips">更多人才政策持续更新中...</p>
    <div class="btn-box" @click="jump">
      提交
    </div>
  </div>
</template>
<script>
import {getPolicyNaire} from '@/api/service/service'
export default {
  name: "chooseProject",
  data: function () {
    return {
      search: "",
      zindex: 0,
      aindex:"",
      cateId:"",
      identity:'',
      cityOptions:[],
      loading:false
    };
  },
  created(){
    //identity
    this.aindex = this.getQueryString("index");
    this.cateId = this.getQueryString("cateId");
    this.identity = this.getQueryString("identity");
    this.cityOptions = JSON.parse(localStorage.getItem('addr'))
  },
  mounted() {
    // this.filterList()
  },
  watch: {},

  methods: {
    tog(index) {
      this.zindex = index;
    },
    //获取地区
    filterList() {

    },
    getQueryString (name) { 
      let reg = `(^|&)${name}=([^&]*)(&|$)`
      let r = window.location.search.substr(1).match(reg); 
      if (r != null) return unescape(r[2]); return null; 
    },
    // jump(){
    //   console.log(this.cityOptions)
    //   this.$router.push({path:'/questions?cateId='+this.cateId+"&cityId="+this.cityOptions[this.aindex].id+'&districtId='+this.cityOptions[this.aindex].children[this.zindex].id})
    // },
     jump(e){
          let data = {
              cityId:this.cityOptions[this.aindex].id,
              districtId:this.cityOptions[this.aindex].children[this.zindex].id,
              cateId:this.cateId
          };
          this.loading = true;
          getPolicyNaire(data).then(res=>{
              this.loading = false;
              if(res.resp_code === 0){
                  if(res.datas.questionList.length == 0){
                      this.$router.push({path:'/matchResults?questionItemIds=&cateId='+this.cateId+'&identity='+this.identity})
                  }else{
                      this.$router.push({path:'/questions?cateId='+this.cateId+"&cityId="+this.cityOptions[this.aindex].id+'&districtId='+this.cityOptions[this.aindex].children[this.zindex].id+'&identity='+this.identity})
                  }
                  
              }else{
                  this.$router.push({path:'/matchResults?questionItemIds=&cateId='+this.cateId+'&identity='+this.identity})
              }
              
          })
      },
  },
};
</script>
<style scoped>
.index {
  background: #eee;
}
#choose-dducation .top-banner-box {
  height: 200px;
  background: transparent
    url(../../assets/policy/supply-policy.png) no-repeat 50%/cover;
}
#choose-dducation .list-box {
  margin-top: -70px;
}
#choose-dducation .list-item-box {
  background: #fff;
  margin: 10px;
  border-radius: 5px;
  overflow: hidden;
}
.van-col {
  float: left;
  box-sizing: border-box;
  min-height: 1px;
}
.van-col--24 {
  width: 100%;
}
.rp {
  padding-right: 16px;
}
#choose-dducation .area-title-box,
#choose-dducation .honour-title-box {
  border-bottom: 1px solid #ddd;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
}
#choose-dducation .area-title,
#choose-dducation .education-title,
#choose-dducation .honour-title {
  height: 45px;
  line-height: 45px;
  padding-left: 50px;
}
#choose-dducation .education-title {
  background: transparent
    url() no-repeat left 15px center/25px;
}
.van-row:after {
  display: table;
  clear: both;
  content: "";
}
.van-cell {
  position: relative;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}
.van-cell__value {
  position: relative;
  overflow: hidden;
  color: #969799;
  text-align: right;
  vertical-align: middle;
}
.van-cell__value--alone {
  color: #323233;
  text-align: left;
}
#choose-dducation .van-cell__value {
  overflow: initial;
}
.van-cell:not(:last-child):after {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  right: 0;
  bottom: 0;
  left: 16px;
  border-bottom: 1px solid #ebedf0;
  transform: scaleY(0.5);
}
.mu-checkbox {
  position: relative;
  display: inline-block;
  height: 24px;
  line-height: 24px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
  color: rgba(0, 0, 0, 0.54);
}
#choose-dducation .mu-checkbox,
#choose-dducation .mu-radio {
  width: 100%;
}
.mu-checkbox input[type="checkbox"] {
  display: none;
}
button,
input {
  overflow: visible;
}
button,
input,
select,
textarea {
  font: inherit;
  margin: 0;
}
.mu-checkbox-wrapper {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 24px;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.mu-checkbox-wrapper {
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  height: 24px;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.mu-checkbox-icon {
  width: 24px;
  height: 24px;
  vertical-align: middle;
  position: relative;
  margin-right: 8px;
}
.mu-checkbox-ripple-wrapper {
  width: 48px;
  height: 48px;
  top: -12px;
  left: -12px;
  position: absolute;
}
svg:not(:root) {
  overflow: hidden;
}
.mu-checkbox-checked .mu-checkbox-icon-uncheck {
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.23, 1, 0.32, 1) 0.15s;
}
.mu-checkbox-icon-uncheck {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 1;
  transition: opacity 1s cubic-bezier(0.23, 1, 0.32, 1) 0.2s;
}
.mu-checkbox-icon-checked {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: scale(0);
  transition: opacity 0.45s cubic-bezier(0.23, 1, 0.32, 1),
    transform 0ms cubic-bezier(0.23, 1, 0.32, 1) 0.45s;
}
.mu-checkbox-checked .mu-checkbox-icon-checked {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0ms cubic-bezier(0.23, 1, 0.32, 1),
    transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}
.mu-checkbox-svg-icon {
  display: inline-block;
  fill: currentColor;
  height: 24px;
  width: 24px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
#choose-dducation .mu-checkbox-label,
#choose-dducation .mu-radio-label {
  -ms-flex-positive: 1;
  flex-grow: 1;
}
.mu-checkbox-label {
  color: rgba(0, 0, 0, 0.87);
}
#choose-dducation .mu-checkbox-checked,
#choose-dducation .mu-radio-checked {
  color: #0cc077;
}
#choose-dducation .areaTips {
    font-size: 14px;
    text-align: right;
    color: #999;
    padding-right: 20px;
    margin-top: 16px;
}
#choose-dducation .btn-box {
    margin: 10px;
    margin-top: 20px;
    padding: 15px;
    text-align: center;
    color: #fff;
    border-radius: 50px;
    background: linear-gradient(90deg,#0bbf76,#3ab8c4);
}
</style>
